<template>
  <el-container>
    <el-header>
      <div class="log-wrapper">
        <span>电商管理系统</span>
      </div>
      <span></span>
      <el-button type="info" @click="logout">退出</el-button>
    </el-header>
    <el-container>
      <!--侧边栏导航 -->
      <el-aside width="200px">
        <div class="toggle_menu" @click="isCollapse = !isCollapse">|||</div>
        <el-menu background-color="#545c64" unique-opened router :collapse="isCollapse">
          <el-submenu :index="item.id + ''" v-for="item of menulist" :key="item.id">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{ item.authName }}</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item :index="'/' + menu.path" v-for="menu in item.children" :key="menu.id">
              <template>
                <!-- 二级菜单图标 -->
                <i class="el-icon-menu"></i>
                <!-- 内容 -->
                <span>{{ menu.authName }}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <div v-show="flag">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{this.aa}}</el-breadcrumb-item>
            <el-breadcrumb-item>{{this.bb}}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      arr: [],
      menulist: [],
      isCollapse: false,
      aa: "",
      bb: "",
      flag: "",
    };
  },
  mounted() {
    this.getlist();
  },
  updated() {
    //定一个变量接受 获取当前的页面的路由
    const cliPath = this.$route.path.replace("/", "");

    if (cliPath === "home") {
      this.flag = false;
    } else {
      this.flag = true;
    }
    //第一层循环是遍历我放数据的数组
    for (let parentPath of this.menulist) {
      //遍历数组里的子级每一项路由数据
      for (let childPath of parentPath.children) {
        //数组的子级路由数据和当前的路由相当就赋值
        if (childPath.path === cliPath) {
          (this.aa = parentPath.authName), (this.bb = childPath.authName);
          return;
        }
      }
    }
  },
  methods: {
    logout() {
      this.$router.push("/login");
      sessionStorage.removeItem("token");
    },
    async getlist() {
      const res = await this.axios.get(
        "https://www.liulongbin.top:8888/api/private/v1/menus"
      );
      let { data, meta } = res.data;
      if (meta.status == 200) {
        this.menulist = data;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.el-container {
  height: 100%;
}
.el-header {
  display: flex;
  justify-content: space-between;
  background-color: #373b41;
  height: 100px;
  font-size: 20px;
  align-items: center;
  color: #fff;
  .log-wrapper {
    display: flex;
    align-items: center;
    span {
      margin-left: 15px;
    }
  }
}
.el-aside {
  background-color: #333744;
  .toggle_menu {
    line-height: 24px;
    color: #fff;
    text-align: center;
    background-color: #4a5064;
    font-size: 12px;
    letter-spacing: 0.03em;
    cursor: pointer;
  }
}
.el-main {
  background-color: #eaedf1;
}
.el-menu {
  border-right: 0px;
}
img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
</style>